# Drawer

## Installation
`npm i @snack-uikit/drawer`

[Changelog](./CHANGELOG.md)



[//]: DOCUMENTATION_SECTION_START
[//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
## DrawerCustom
Компонент-конструктор
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| onClose* | `() => void` | - | Колбэк закрытия |
| open* | `boolean` | - | Управление состоянием показан/не показан. |
| mode | enum Mode: `"regular"`, `"soft"` | - | Режим отображения |
| position | enum Position: `"right"`, `"left"` | - | Расположение открытого Drawer |
| className | `string` | - | CSS-класс для элемента с контентом |
| rootClassName | `string` | - | CSS-класс для корневого элемента |
| size | `string \| number` | - | Размер |
| push | `boolean \| PushConfig` | - | Смещение при открытии "вложенного" компонента |
| container | `string \| HTMLElement` | - | Контейнер в котором будет рендерится Drawer. По-умолчанию - body |
| nestedDrawer | `ReactElement<DrawerCustomProps, string \| JSXElementConstructor<any>>` | - | Вложенный Drawer |
## Drawer
Готовый компонент Drawer
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| title* | `string` | - | Заголовок |
| content* | `ReactNode` | - | Контент |
| onClose* | `() => void` | - | Колбэк закрытия |
| open* | `boolean` | - | Управление состоянием показан/не показан. |
| mode | enum Mode: `"regular"`, `"soft"` | - | Режим отображения |
| position | enum Position: `"right"`, `"left"` | - | Расположение открытого Drawer |
| className | `string` | - | CSS-класс для элемента с контентом |
| rootClassName | `string` | - | CSS-класс для корневого элемента |
| container | `string \| HTMLElement` | - | Контейнер в котором будет рендерится Drawer. По-умолчанию - body |
| titleTooltip | `ReactNode` | - | Тултип для заголовка |
| image | `{ src: string; alt: string; }` | - | Изображение |
| subtitle | `string` | - | Подзаголовок |
| size | enum Size: `"s"`, `"m"`, `"l"` | - | Размер |
| approveButton | `Omit<ButtonFilledProps, "size"> & { tooltip?: TooltipProps; }` | - | Основная кнопка |
| cancelButton | `Omit<ButtonOutlineProps, "size"> & { tooltip?: TooltipProps; }` | - | Кнопка отмены |
| additionalButton | `Omit<ButtonSimpleProps, "size"> & { tooltip?: TooltipProps; }` | - | Дополнительная кнопка |
| nestedDrawer | `ReactElement<DrawerProps, string \| JSXElementConstructor<any>>` | - | Вложенный Drawer |
| truncate | `{ title?: number; subtitle?: number; }` | '{ <br>title: 1; <br>subtitle: 2; }' | Максимальное кол-во строк <br> - `title` - в заголовке <br> - `subtitle` - в подзаголовке |


[//]: DOCUMENTATION_SECTION_END

## DrawerCustom.Header
Вспомогательный компонент для добавления "шапки" в DrawerCustom

### Props
| name         | type                            | required | default value | description          |
|--------------|---------------------------------|----------|---------------|----------------------|
| title        | `string`                        | true     | -             | Заголовок            |
| titleTooltip | `ReactNode`                     | false    | -             | Тултип для заголовка |
| subtitle     | `string`                        | false    | -             | Подзаголовок         |
| image        | `{ src: string; alt: string; }` | false    | -             | Изображение          |
| className    | `string`                        | false    | -             | CSS-класс            |

## DrawerCustom.Body
Вспомогательный компонент для добавления "тела" в DrawerCustom

### Props
| name      | type        | required | default value | description |
|-----------|-------------|----------|---------------|-------------|
| content   | `ReactNode` | true     | -             | Контент     |
| className | `string`    | false    | -             | CSS-класс   |

## DrawerCustom.Footer
Вспомогательный компонент для добавления "футера" в DrawerCustom

### Props
| name      | type        | required | default value | description                         |
|-----------|-------------|----------|---------------|-------------------------------------|
| actions   | `ReactNode` | true     | -             | Слот для добавления кнопок-действий |
| className | `string`    | false    | -             | CSS-класс                           |
